<template>
  <div class="header-content">
    <div class="header-actions">
      <el-button type="primary" text size="small" @click="handleEditHeader(-1, null)">
        添加参数
      </el-button>
    </div>

	<el-table :data="queryParams" border style="width: 100%">
		<el-table-column prop="name" label="参数名称" />
		<el-table-column prop="identifier" label="参数标识" width="120" />
		<el-table-column prop="required" label="参数必填" align="center" width="100">
			<template #default="scope">
			  <el-tag :type="scope.row.required == '1' ? 'danger' : 'info'">
				{{ scope.row.required == '1' ? "必填" : "可选" }}
			  </el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="defaultValue" label="参数默认值" />
		<el-table-column label="操作" width="150" fixed="right">
			<template #default="{ row, $index }">
				<el-button link type="primary" @click="handleEditHeader($index, row)">编辑</el-button>
				<el-button link type="danger" @click="removeHeader($index)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>

    <EditParamFieldDrawer
		ref="paramFieldDrawerRef"
		@success="handleParamFieldSuccess"
		@closed="handleParamFieldClosed"
		@parse-fields="handleParseJsonFields"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import EditParamFieldDrawer from '@/components/DataWorkflow/components/EditParamFieldDrawer.vue'
import { HttpQueryParamField } from '@/components/DataWorkflow/types/data-collect.ts';

const props = defineProps<{ 
  data: HttpQueryParamField[]
}>();

const queryParams = computed(() => props.data);

const paramFieldDrawerRef = ref();
const currentEditIndex = ref(-1);

const openParamFieldDrawer = (index: number, row?: any) => {
	currentEditIndex.value = index;
	paramFieldDrawerRef.value?.openDialog(index, row, row ? 'edit' : 'add');
};

const handleEditHeader = (index: number, row: any) => {
	openParamFieldDrawer( index, row);
};

const handleEditParam = (index: number, row: any) => {
	openParamFieldDrawer(index, row);
};

const removeHeader = (index: number) => queryParams.value.splice(index, 1);

const handleParamFieldSuccess = (index: number, data: any) => {
	console.log(index,"=",data);
	if (index === -1) {
		queryParams.value.push(data);
	} else {
		queryParams.value[index] = data;
	}
};

const handleParamFieldClosed = () => {
	currentEditIndex.value = -1;
};

const handleParseJsonFields = (fields: any[]) => {
	const headerPaths = new Set(queryParams.value.map((f:any) => f.key));
	const newHeaderFields = fields.filter(f => !headerPaths.has(f.key));
	if (newHeaderFields.length === 0) {
		ElMessage.warning('没有新的字段需要添加');
		return;
	}
	queryParams.value.push(...newHeaderFields);
	ElMessage.success(`成功添加 ${newHeaderFields.length} 个字段`);
};

const getData=()=>{
	return queryParams.value;
}

defineExpose({
  getData
})

</script>

<style scoped>
.header-content {
  border-radius: 4px;
}

.header-actions {
  margin-bottom: 0.375rem;
  display: flex;
  gap: 8px;
}
</style>